<!-- The actual content of the page -->
<div class="content">
    {$MESSAGE}
</div>
<div class="content" id="main_content">
    <h1>Sessions</h1>
    <div id="gridbox" style="height:300px;"></div>
    <a href="{$RELPATH}/session_detail" rel="facebox"><img src="{$TEMPLATE_PATH}/images/icons/32/add.png" title="New session"></a>
    <script type="text/javascript">
        mygrid = new dhtmlXGridObject("gridbox");
        mygrid.setHeader("date, location, type, game, hours, result, notes");
        mygrid.setInitWidths("75,80,80,80,50,50,159");
        mygrid.setColTypes("ro,ro,ro,ro,ro,price,ro");
        mygrid.setColSorting("int,str,str,str,int,int,na")
        mygrid.setSkin("modern");
        eXcell_price.prototype.setValue = function(val){
            if(isNaN(Number(val))){
                val = 0;
            }
            var color = "green";
            if(val<0) color = "red";
            this.setCValue("<span>$</span><span style='padding-right:2px;color:"+color+";'>"+val+"</span>",val);
        };
        mygrid.attachEvent("onRowDblClicked",function(rId){
            var url = "{$RELPATH}/session_detail/" + rId;
            jQuery.facebox({ ajax : url});
        })
        mygrid.init();
        mygrid.load("{$RELPATH}/grid");
        function doubleClick(id){
            var url = "{$RELPATH}/session_detail/" + id;
            jQuery.facebox({ ajax : url});
        }
        function reload_grid()
        {
            mygrid.clearAndLoad("{$RELPATH}/grid");
        }
    </script>
</div>